<template>
	<div>
		<home-header></home-header>
		<home-swiper :swiperList = "swiperList"></home-swiper>
		<home-icons :iconsList = "iconList"></home-icons>
		<home-recommend :recommendList = "recommendList"></home-recommend>
		<home-weekend :weekendList = "weekendList"></home-weekend>
	</div>
</template>

<script>
	import homeHeader from './components/header.vue'
	import homeSwiper from './components/swiper.vue'
	import homeIcons from './components/icons.vue'
	import homeRecommend from './components/recommend.vue'
	import homeWeekend from './components/weekend.vue'
	import axios from 'axios'
	import { mapState } from 'vuex'
	export default {
		name:'home',
		components:{
			homeHeader,
			homeSwiper,
			homeIcons,
			homeRecommend,
			homeWeekend
		},
		data () {
			return {
				lastCity:'',
				swiperList:[],
				iconList:[],
				recommendList:[],
				weekendList:[],
			}
		},
		methods : {
			getIndexInfo(){
				axios.get('/api/index.json?city=' + this.city)
				.then(this.getIndexInfoSucc);
			},
			getIndexInfoSucc (res){
				if(res.data.ret && res.data.data) {
					const data = res.data.data;
					this.swiperList = data.swiperList;
					this.iconList = data.iconList;
					this.recommendList = data.recommendList;
					this.weekendList = data.weekendList;
				}
			}
		},
		computed : {
			...mapState(['city'])
		},
		mounted () {
			this.lastCity = this.city;
			this.getIndexInfo();
		},
		activated () {
			// 页面再次显示（通过路由切换，再次显示）生命周期
			if(this.lastCity !== this.city){
				this.lastCity = this.city;
				this.getIndexInfo();
			}
		}
	}
</script>

<style scope>

</style>